<template>
    <div id="europe-network-topology" style="width: 100%; height: 600px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'EuropeNetworkTopology',
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        const chartDom = document.getElementById('europe-network-topology');
        const myChart = echarts.init(chartDom);
  
        const option = {
          tooltip: {
            formatter: '{b}'
          },
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              label: {
                show: true,
              },
              edgeSymbol: 'none',
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                fontSize: 10
              },
              data: [
                { name: 'London', x: 100, y: 300 },
                { name: 'Paris', x: 200, y: 350 },
                { name: 'Berlin', x: 350, y: 300 },
                { name: 'Madrid', x: 100, y: 500 },
                { name: 'Rome', x: 300, y: 500 },
                { name: 'Amsterdam', x: 250, y: 270 },
                { name: 'Vienna', x: 400, y: 400 },
                { name: 'Warsaw', x: 500, y: 300 },
                { name: 'Moscow', x: 700, y: 250 },
                { name: 'Athens', x: 500, y: 600 },
                { name: 'Copenhagen', x: 300, y: 200 },
                { name: 'Oslo', x: 250, y: 100 },
              ],
              links: [
                { source: 'London', target: 'Paris', label: { show: true, formatter: '2' } },
                { source: 'Paris', target: 'Berlin', label: { show: true, formatter: '3' } },
                { source: 'Berlin', target: 'Vienna', label: { show: true, formatter: '5' } },
                { source: 'Paris', target: 'Madrid', label: { show: true, formatter: '8' } },
                { source: 'Madrid', target: 'Rome', label: { show: true, formatter: '6' } },
                { source: 'Rome', target: 'Athens', label: { show: true, formatter: '10' } },
                { source: 'Berlin', target: 'Amsterdam', label: { show: true, formatter: '4' } },
                { source: 'Amsterdam', target: 'Copenhagen', label: { show: true, formatter: '2' } },
                { source: 'Copenhagen', target: 'Oslo', label: { show: true, formatter: '3' } },
                { source: 'Berlin', target: 'Warsaw', label: { show: true, formatter: '4' } },
                { source: 'Warsaw', target: 'Moscow', label: { show: true, formatter: '9' } },
                { source: 'Vienna', target: 'Athens', label: { show: true, formatter: '7' } },
                { source: 'Vienna', target: 'Warsaw', label: { show: true, formatter: '5' } },
                // 添加其他连接来模拟更复杂的欧洲网络
              ],
              lineStyle: {
                color: 'source',
                curveness: 0.3,
              }
            }
          ]
        };
  
        myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped>
  #europe-network-topology {
    width: 100%;
    height: 100%;
  }
  </style>
  